
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>个人名片卡片</title>
    <style>

.card {
width: min(440px, 92vw);
background: var(--card);
border-radius: 8px;
padding: 12px;
display: grid;
grid-template-columns: var(--avatar) 1fr;
gap: 12px;
align-items: center;
border: 1px solid #e5e7eb;
}

.avatar {
width: var(--avatar);
height: var(--avatar);
border-radius: 50%;
overflow: hidden;
background: #ddd;
}

.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.list {
list-style: none;
padding: 0;
margin: 0;
}

.list-item {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
border: 1px solid #eee;
border-radius: 6px;
background: #f8f8f8;
margin-bottom: 6px;
text-decoration: none;
color: #333;
}
:root { --bg: #f5f7fb;
    --card: #fff; --text: #111; --muted: #555; --avatar: 90px; }
</style>
</head> <body>
<main class="card" aria-label="个人名片卡片">
    <div class="avatar" aria-label="头像">
        <img src="./imgs/img_1.png" alt="个人头像" />
    </div>
    <h3>韩梦如</h3>
    <p>开发工程师</p>
    <ul class="list" aria-label="联系方式">
        <li class="list-item">
            <span>155 1234 5678</span> </li>
        <li class="list-item">
            <span>2325689512@qq.com</span></li>
        <li class="list-item">
            <span>河南师范大学</span> </li> </ul> </section>
</main>
</body>
</html>
<!--<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>个人名片卡片（简化版）</title> <style> /* 变量，便于快速修改颜色与尺寸 */ :root { &#45;&#45;bg: #f5f7fb; &#45;&#45;card: #fff; &#45;&#45;text: #111; &#45;&#45;muted: #555; &#45;&#45;avatar: 90px; }-->
<!--{ box-sizing: border-box; }-->
<!--body {-->
<!--margin: 0;-->
<!--min-height: 100vh;-->
<!--display: flex;-->
<!--align-items: center;-->
<!--justify-content: center;-->
<!--background: linear-gradient(#e8eaf6, #f5f7fb);-->
<!--font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "PingFang SC", sans-serif;-->
<!--color: var(&#45;&#45;text);-->
<!--}-->

<!--.card {-->
<!--width: min(440px, 92vw);-->
<!--background: var(&#45;&#45;card);-->
<!--border-radius: 10px;-->
<!--padding: 14px;-->
<!--display: grid;-->
<!--grid-template-columns: var(&#45;&#45;avatar) 1fr;-->
<!--gap: 14px;-->
<!--align-items: center;-->
<!--border: 1px solid #e5e7eb;-->
<!--}-->

<!--.avatar {-->
<!--width: var(&#45;&#45;avatar);-->
<!--height: var(&#45;&#45;avatar);-->
<!--border-radius: 50%;-->
<!--overflow: hidden;-->
<!--background: #ddd;-->
<!--}-->

<!--.avatar img {-->
<!--width: 100%;-->
<!--height: 100%;-->
<!--object-fit: cover;-->
<!--display: block;-->
<!--}-->

<!--.info {-->
<!--display: grid;-->
<!--gap: 6px;-->
<!--}-->

<!--.name {-->
<!--font-size: 1.1rem;-->
<!--font-weight: 700;-->
<!--margin: 0;-->
<!--}-->

<!--.title {-->
<!--font-size: .92rem;-->
<!--color: var(&#45;&#45;muted);-->
<!--margin: 0;-->
<!--}-->

<!--.contacts {-->
<!--display: grid;-->
<!--grid-template-columns: 1fr;-->
<!--gap: 6px;-->
<!--margin-top: 6px;-->
<!--}-->

<!--.contact {-->
<!--display: inline-flex;-->
<!--align-items: center;-->
<!--gap: 6px;-->
<!--font-size: .92rem;-->
<!--color: #333;-->
<!--text-decoration: none;-->
<!--padding: 6px 8px;-->
<!--border-radius: 6px;-->
<!--border: 1px solid #eee;-->
<!--background: #f9f9f9;-->
<!--}-->

<!--/* 简单的小图标（使用内嵌 SVG） */-->
<!--.icon {-->
<!--width: 16px; height: 16px;-->
<!--display: inline-block;-->
<!--vertical-align: middle;-->
<!--}-->
<!--.icon.phone { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23999"><path d="M6.62 10.79a15.091 15.091 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24 11.36 11.36 0 003.54.57 1 1 0 011 1v3.5a1 1 0 01-1 1A16 16 0 013 5a1 1 0 011-1h3.5a1 1 0 011 1 11.36 11.36 0 00.57 3.54 1 1 0 01-.24 1.01l-2.21 2.24z"/></svg>') no-repeat center/contain; }-->
<!--.icon.email { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23999"><path d="M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>') no-repeat center/contain; }-->
<!--.icon.website { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23999"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 5h2v2h-2V7zm-4 0h2v2H9V7zm0 4h2v2H9v-2zm4 0h2v2h-2v-2z"/></svg>') no-repeat center/contain; }-->

<!--/* 小适配：窄屏时头像放上方，信息在下方 */-->
<!--@media (max-width: 560px) {-->
<!--.card {-->
<!--grid-template-columns: 1fr;-->
<!--padding: 12px;-->
<!--text-align: left;-->
<!--}-->
<!--.avatar {-->
<!--width: 110px;-->
<!--height: 110px;-->
<!--justify-self: center;-->
<!--margin: 0 auto;-->
<!--}-->
<!--}-->

<!--</style> </head> <body> <main class="card" aria-label="个人名片卡片"> <div class="avatar" aria-label="头像"> <img src="https://via.placeholder.com/150" alt="个人头像" /> </div> <section class="info" aria-label="个人信息"> <h2 class="name">张三</h2> <p class="title">前端开发工程师</p> <div class="contacts" aria-label="联系方式"> <a class="contact" href="tel:+8613812345678" title="拨打电话"> <span class="icon phone" aria-hidden="true"></span> <span>+86 138 1234 5678</span> </a> <a class="contact" href="mailto:zhangsan@example.com" title="发送邮箱"> <span class="icon email" aria-hidden="true"></span> <span>zhangsan@example.com</span> </a> <a class="contact" href="https://www.example.com" target="_blank" rel="noopener" title="个人网站"> <span class="icon website" aria-hidden="true"></span> <span>www.example.com</span> </a> </div> </section> </main> </body> </html>-->

<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>个人名片卡片</title>-->
<!--    <style>-->
<!--    body {-->
<!--    margin: 0;-->
<!--    min-height: 100vh;-->
<!--    display: flex;-->
<!--    align-items: center;-->
<!--    justify-content: center;-->
<!--    background: radial-gradient(circle at 20% -10%, rgba(99,102,241,.15), transparent 40%),-->
<!--    radial-gradient(circle at 100% 0%, rgba(16,185,129,.08), transparent 40%),-->
<!--    var(&#45;&#45;bg);-->
<!--    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "PingFang SC", "Helvetica Neue", sans-serif;-->
<!--    color: var(&#45;&#45;text);-->
<!--    }-->

<!--    .card {-->
<!--    width: min(420px, 92vw);-->
<!--    background: var(&#45;&#45;card);-->
<!--    border-radius: 16px;-->
<!--    box-shadow: 0 20px 40px rgba(0,0,0,.05);-->
<!--    padding: 20px;-->
<!--    display: grid;-->
<!--    grid-template-columns: 110px 1fr;-->
<!--    gap: 16px;-->
<!--    align-items: center;-->
<!--    }-->

<!--    /* 头像区域 */-->
<!--    .avatar {-->
<!--    width: var(&#45;&#45;avatar-size);-->
<!--    height: var(&#45;&#45;avatar-size);-->
<!--    border-radius: 50%;-->
<!--    overflow: hidden;-->
<!--    border: 3px solid #fff;-->
<!--    box-shadow: 0 6px 14px rgba(0,0,0,.08);-->
<!--    background: #e5e7eb;-->
<!--    }-->

<!--    .avatar img {-->
<!--    width: 100%;-->
<!--    height: 100%;-->
<!--    object-fit: cover;-->
<!--    display: block;-->
<!--    }-->

<!--    /* 信息区域 */-->
<!--    .info {-->
<!--    display: grid;-->
<!--    grid-template-rows: auto auto auto;-->
<!--    row-gap: 8px;-->
<!--    }-->

<!--    .name {-->
<!--    font-size: 1.25rem;-->
<!--    font-weight: 700;-->
<!--    margin: 0;-->
<!--    color: #111827;-->
<!--    letter-spacing: .2px;-->
<!--    }-->

<!--    .title {-->
<!--    font-size: .95rem;-->
<!--    color: var(&#45;&#45;muted);-->
<!--    margin: 0;-->
<!--    }-->

<!--    .contacts {-->
<!--    display: grid;-->
<!--    grid-auto-rows: min-content;-->
<!--    gap: 6px;-->
<!--    padding-top: 4px;-->
<!--    }-->

<!--    .contact {-->
<!--    display: inline-flex;-->
<!--    align-items: center;-->
<!--    gap: 8px;-->
<!--    font-size: .92rem;-->
<!--    color: #374151;-->
<!--    text-decoration: none;-->
<!--    padding: 6px 10px;-->
<!--    border-radius: 999px;-->
<!--    background: #f8fafc;-->
<!--    border: 1px solid #e5e7eb;-->
<!--    transition: transform .2s ease;-->
<!--    }-->

<!--    .contact:hover {-->
<!--    transform: translateY(-1px);-->
<!--    background: #f1f5f9;-->
<!--    }-->

<!--    .icon {-->
<!--    width: 16px;-->
<!--    height: 16px;-->
<!--    display: inline-block;-->
<!--    /* 使用简单的 SVG 图标或字体图标的占位符 */-->
<!--    vertical-align: middle;-->
<!--    }-->

<!--    /* 简单的 SVG 图标直接内嵌 */-->
<!--    .icon.phone::before {-->
<!--    content: "";-->
<!--    display: inline-block;-->
<!--    width: 16px; height: 16px;-->
<!--    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23999" viewBox="0 0 24 24"><path d="M6.62 10.79a15.091 15.091 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24 11.36 11.36 0 003.54.57 1 1 0 011 1v3.5a1 1 0 01-1 1A16 16 0 013 5a1 1 0 011-1h3.5a1 1 0 011 1 11.36 11.36 0 00.57 3.54 1 1 0 01-.24 1.01l-2.21 2.24z" fill="%23999"/></svg>') no-repeat center/contain;-->
<!--    }-->

<!--    .icon.email::before {-->
<!--    content: "";-->
<!--    display: inline-block;-->
<!--    width: 16px; height: 16px;-->
<!--    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23999" viewBox="0 0 24 24"><path d="M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" /></svg>') no-repeat center/contain;-->
<!--    }-->

<!--    .icon.website::before {-->
<!--    content: "";-->
<!--    display: inline-block;-->
<!--    width: 16px; height: 16px;-->
<!--    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23999" viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 5h2v2h-2V7zm-4 0h2v2H9V7zm0 4h2v2H9v-2zm4 0h2v2h-2v-2z"/></svg>') no-repeat center/contain;-->
<!--    }-->

<!--    /* 响应式考虑：在窄屏上将头像放在上方 */-->
<!--    @media (max-width: 600px) {-->
<!--    .card {-->
<!--    grid-template-columns: 1fr;-->
<!--    padding: 16px;-->
<!--    }-->
<!--    .avatar {-->
<!--    width: 110px;-->
<!--    height: 110px;-->
<!--    justify-self: center;-->
<!--    }-->
<!--    .info {-->
<!--    padding-top: 6px;-->
<!--    }-->
<!--    }-->

<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--    <main class="card" aria-label="个人名片卡片">-->
<!--        <div class="avatar" aria-label="头像">-->
<!--            &lt;!&ndash; 将 src 替换为你的头像图片链接 &ndash;&gt;-->
<!--            <img src="./imgs/img.png" alt="个人头像" />-->
<!--        </div>-->
<!--        <section class="info" aria-label="个人信息">-->
<!--            <h1 class="name">张三</h1>-->
<!--            <p class="title">前端开发工程师</p>-->
<!--            <div class="contacts" aria-label="联系方式">-->
<!--                <a class="contact" href="tel:+8613812345678" title="拨打电话">-->
<!--                    <span class="icon phone" aria-hidden="true"></span>-->
<!--                    <span>+86 138 1234 5678</span> </a>-->
<!--                <a class="contact" href="mailto:zhangsan@example.com" title="发送邮箱">-->
<!--                    <span class="icon email" aria-hidden="true"></span>-->
<!--                    <span>zhangsan@example.com</span> </a>-->
<!--                <a class="contact" href="https://www.example.com" target="_blank" rel="noopener" title="个人网站">-->
<!--                    <span class="icon website" aria-hidden="true"></span>-->
<!--                    <span>www.example.com</span>-->
<!--                </a>-->
<!--            </div> </section>-->
<!--    </main>-->
<!--&lt;!&ndash;用 HTML5 结构和 CSS3 样式制作一个个人名片卡片，包含头像、姓名、职位和联系方式。&ndash;&gt;-->
<!--&lt;!&ndash;<div class="card">&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<style>&ndash;&gt;-->

<!--&lt;!&ndash;</style>&ndash;&gt;-->

<!--</body>-->
<!--</html>-->
